<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/TransInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="QuarzeInfo-page" class="both-center">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button @click="childMethod()" size="small">关闭</el-button>
        <el-button type="primary" @click="handleInit" size="small">初始化数据</el-button>
        <el-button type="info" @click="handleRefesh" size="small">刷新</el-button>
        <el-button type="success" @click="handleSave" size="small">保存</el-button>
      </el-row>
      <el-divider content-position="left">定时任务详细</el-divider>
      <el-row class="row fstRow clearfix">
        <!-- 上侧项目内容栏-->
        <el-col :span="24" style="height: auto;">
          <!--分类栏内容介绍行-->
          <div class="col-sm-12" style="width: 1080px">
            <el-card class="card-top-container" v-loading="isloading">
              <div style="margin: 20px;">
                <el-form label-position="right" :label-width="labelWidth" :model="Quartz">
                  <el-form-item label="任务名称">
                    <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
                      <el-input v-model="Quartz.jobName" maxlength="100"></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="任务组">
                    <el-input v-model="Quartz.jobGroupName" readonly style="width: 200px"></el-input>
                    <el-select v-model="Quartz.jobGroupName" placeholder="选择触发器组" style="margin-left: 20px">
                      <el-option value="onDay" label="每日任务"></el-option>
                      <el-option value="onWeek" label="每周任务"></el-option>
                      <el-option value="onMonth" label="每月任务"></el-option>
                      <el-option value="ones" label="触发任务"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- ################################################################################################### -->
                  <el-form-item label="触发器名称">
                      <el-input v-model="cust_triggerName" :readonly="is_custom_2" maxlength="50" style="width: 200px"></el-input>
                      <el-select v-model="Quartz.triggerName" placeholder="选择触发器组" @change="(val) => setCus2(val)"
                                 style="margin-left: 20px">
                        <el-option :label="item.label" :value="item.value" v-for="item in triggerOpts"
                                   :key="item.key"></el-option>
                      </el-select>
                  </el-form-item>
                  <!-- ################################################################################################### -->
                  <el-form-item label="触发器组">
                    <el-input v-model="Quartz.triggerGroupName" readonly style="width: 200px"></el-input>
                    <el-select v-model="Quartz.triggerGroupName" placeholder="选择触发器组" style="margin-left: 20px">
                      <el-option :label="item.label" :value="item.value" v-for="item in triggerGroupNameOpts"
                                 :key="item.key"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="执行类">
                    <el-input v-model="Quartz.jobClass" readonly style="width: 200px"></el-input>
                    <el-select v-model="Quartz.jobClass" placeholder="选择分类" style="margin-left: 20px">
                      <el-option value="NewJob" label="JAVA回调任务"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- ################################################################################################### -->
                  <el-form-item label="表达式">
                    <el-input v-model="cust_cron" maxlength="50" style="width: 200px"></el-input>
                    <el-select v-model="Quartz.cronExpression" placeholder="选择模板" @change="(val) => setCron(val)"
                               style="margin-left: 20px">
                      <el-tooltip class="item" effect="dark" :content="item.exp" placement="right-start"
                                  v-for="item in cronExpressionOpts"
                                  v-bind:key="item.key">
                        <el-option :label="item.label" :value="item.value"></el-option>
                      </el-tooltip>
                    </el-select>
                    <el-button type="info" @click="handleOpen" size="small" style="margin-left: 20px">参考样例
                    </el-button>
                  </el-form-item>
                  <!-- ################################################################################################### -->
                  <el-form-item label="回调地址">
                    <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
                      <el-input v-model="cust_callBack" :readonly="is_custom" maxlength="200"></el-input>
                    </el-col>
                    <el-col :lg="4" :md="4" :sm="4" :xl="4" :xs="4">
                      <el-select v-model="Quartz.callBack" placeholder="选择分类" @change="(val) => setCus(val)"
                                 style="margin-left: 20px">
                        <el-option :label="item.label" :value="item.value" v-for="item in callBackOpts"
                                   v-bind:key="item.key"></el-option>
                      </el-select>
                    </el-col>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex";
import {addQuartzJson, fetchQuartzInfoJson, updateQuartzJson} from "@/api/quartzApi";
import {Loading} from 'element-ui';


export default {
  name: "QuarzeDrawer",
  components: {},
  data() {
    return {
      initFlg: true,
      isloading: false,
      is_custom: true,
      is_custom_2: true,
      is_cust_cron: true,
      labelWidth: "140px",
      Quartz: {
        id: 0,
        jobName: "",
        jobGroupName: "",
        triggerName: "",
        triggerGroupName: "",
        jobClass: "",
        cronExpression: "",
        callBack: ""
      },
      cust_callBack: '',
      cust_triggerName: '',
      cust_cron: '',
      callBackOpts: [
        {key: 1, label: "hcm餐食计算", value: "http://172.17.0.9:9006/hcmsed/api/calSeduDinner"},
        {key: 0, label: "自定义数据", value: "-1"}
      ],
      triggerOpts: [
        {key: 1, label: "hcm项目触发器", value: "hcmTrigger"},
        {key: 0, label: "自定义数据", value: "-1"}
      ],
      triggerGroupNameOpts: [
        {key: 1, label: "HCM健康中心", value: "hcmGroup"},
      ],
      cronExpressionOpts: [
        {key: 0, label: "月任务", value: "0 0 2 1 * ?", exp: "表示在每月的1日的凌晨2点调整任务"},
        {key: 1, label: "周任务", value: "0 15 10 ? * MON-FRI", exp: "表示周一到周五每天上午10:15执行作业, SAT 周六"},
        {key: 2, label: "日任务", value: "0 35 20 * * ?", exp: "每天下午20:35触发"},
        {key: 3, label: "小时任务", value: "0 0 0/1 * * ?", exp: "当天的每一个小时触发一次"},
        {key: 4, label: "分钟任务", value: "0 0/2 * * * ?", exp: "表示每2分钟 执行任务"},
        {key: 5, label: "秒任务", value: "0/2 * * * * ?", exp: "表示每2秒 执行任务"},
        {key: 6, label: "餐食计算任务", value: "0 0 8 ? * WED", exp: "表示每个星期三上午8点 执行任务"},
        {key: 9, label: "自定义脚本", value: "-1", exp: "自定义原始cron脚本"},
      ]
    }
  },
  props: {
    drawId: {type: [Object, Number], default: 0}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleInit() {
      this.initFlg = true;
      this.is_custom = true;
      this.cust_callBack = '';
      this.cust_triggerName = '';
      this.cust_cron = '';
      this.Quartz = new Object({
        id: 0,
        jobName: "",
        jobGroupName: "",
        triggerName: "",
        triggerGroupName: "",
        jobClass: "",
        cronExpression: "",
        callBack: ""
      })
    },
    handleLoad(drawId) {
      this.loadQuartzInfo(drawId);
    },
    handleRefesh() {
      if (this.id == 0) {
        this.handleInit();
        return
      }
      this.loadQuartzInfo(this.id);
    },
    handleOpen() {
      window.open("https://cron.qqe2.com/");
    },
    handleSave() {
      if (this.Quartz.callBack == "-1") {
        this.Quartz.callBack = this.cust_callBack;
      }
      if (this.Quartz.triggerName == "-1") {
        this.Quartz.triggerName = this.cust_triggerName;
      }
      this.Quartz.cronExpression = this.cust_cron;
      if (this.initFlg) {
        addQuartzJson(this.Quartz).then((result) => {
          if (result.code == 200) {
            this.handleInit();
            // Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
            this.$emit('fMethod', true);
          }
        }).catch(err => {
          this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
        });
      } else {
        updateQuartzJson(this.Quartz).then((result) => {
          if (result.code == 200) {
            this.handleInit();
            // Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
            this.$emit('fMethod', true);
          }
        }).catch(err => {
          this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
        });
      }
    },
    childMethod() {
      this.isloading = false;
      this.loadingInstance.close();
      this.$emit('fMethod');
    },
    async loadQuartzInfo(drawId) {
      this.isloading = true;
      if (drawId == 0) {
        this.childMethod();
        return;
      }
      await fetchQuartzInfoJson({"id": drawId}).then((result) => {
        if (result.code == 200) {
          this.Quartz = result.data;
          this.cust_triggerName = result.data.triggerName;
          this.cust_callBack = result.data.callBack;
          this.cust_cron = result.data.cronExpression;
        } else {
          this.$notify({title: '执行失败', message: '数据操作异常' + result.message, type: 'error', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
      this.isloading = false;
      this.loadingInstance.close();
    },
    setCus(val) {
      if (val == "-1") {
        this.is_custom = false;
        this.cust_callBack = '';
      } else {
        this.is_custom = true;
        this.cust_callBack = val;
      }
    },
    setCus2(val) {
      if (val == "-1") {
        this.is_custom_2 = false;
        this.cust_triggerName = '';
      } else {
        this.is_custom_2 = true;
        this.cust_triggerName = val;
      }
    },
    setCron(val) {
      if (val == "-1") {
        this.is_cust_cron = false;
        this.cust_cron = '';
      } else {
        this.is_cust_cron = true;
        this.cust_cron = val;
      }
    }
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        if (drawId == 0) {
          this.initFlg = true;
          this.id = 0;
          this.handleInit();
        } else {
          this.initFlg = false;
          this.id = drawId;
          this.handleLoad(drawId);
        }
        this.$emit.drawId = 0;
      },
      deep: true
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}

.card-top-container {
  display: block;
  padding: 5px;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>